<!-- directive:title liuyp::js控制文档下载 -->
<!-- directive:breadcrumb 小tip:JS前端创建html或json文件并浏览器导出下载 -->
<div class='panel-body'>
    <div class='panel panel-default'>
        <div class='panel-heading'> z-index 说明 </div>
        <div class='panel-body'>
            <article class="docs-content">
                <div>
                    <a href="../../images/head.zhishui.jpg" download>下载,成功</a>
                </div>
                <hr />
                <script type="text/xianJs" ui-bs>
                    <a href="../../images/head.zhishui.jpg" download>下载</a>
                </script>
                <img src="../../images/head.zhishui.jpg" alt="" id="img" />
                <a href="javascript:;" onclick="dothis1()">下载,失败了</a>
                <script type="text/javascript" ui-bs>
                    function dothis1(){
                        var c = document.getElementById('img');
                        var f = "闹钟.png";
                        funDownload1(c, f);
                    }
                    function funDownload1(domImg, filename) {
                        // 创建隐藏的可下载链接
                        var eleLink = document.createElement('a');
                        eleLink.download = filename;
                        eleLink.style.display = 'none';
                        // 图片转base64地址
                        var canvas = document.createElement('canvas');
                        var context = canvas.getContext('2d');
                        var width = domImg.natureWidth;
                        var height = domImg.natureHeight;
                        context.drawImage(domImg, 0, 0);
                        // 如果是PNG图片，则context.toDataURL('image/png')
                        eleLink.href = context.toDataURL('image/jpeg');
                        // 触发点击
                        document.body.appendChild(eleLink);
                        eleLink.click();
                        // 然后移除
                        document.body.removeChild(eleLink);
                    }
                </script>
                <hr />
                <a href="javascript:;" onclick="dothis2()">下载,成功</a>
                <script type="text/xianjs" ui-bs id="there">
                    <!doctype html>
                    <html>
                        <head>
                            <meta charset="utf-8">
                            <title>测试</title>
                        </head>
                        <body>
                            <h1>测试</h1>
                        </body>
                    </html>
                </script>
                <script type="text/javascript" ui-bs>
                    function dothis2(){
                        var c = $("#there").html();
                        var f = "index.html";
                        funDownload2(c, f);
                    }
                    function funDownload2(content, filename) {
                        // 创建隐藏的可下载链接
                        var eleLink = document.createElement('a');
                        eleLink.download = filename;
                        eleLink.style.display = 'none';
                        // 字符内容转变成blob地址
                        var blob = new Blob([content]);
                        eleLink.href = URL.createObjectURL(blob);
                        // 触发点击
                        document.body.appendChild(eleLink);
                        eleLink.click();
                        // 然后移除
                        document.body.removeChild(eleLink);
                    }
                </script>
            </article>
        </div>
    </div>
</div>
